<template>
  <div class="NavBox">
    <div class="LeftLoginStatictrue" v-if="true">
      <!-- <div class="leftbox" @click="$router.push('/home')">
        <img
          class="leftbox"
          style="cursor: pointer"
          src="@/assets/image/header/logo.png"
          alt=""
        />
      </div> -->
      你好，{{ userData.username }}
      <span
        v-if="token"
        style="
          color: #e22a1f;
          font-size: 0.16rem;
          font-weight: 500;
          cursor: pointer;
          margin-left: 0.15rem;
          font-family: PingFang SC;
          line-height: 0.12rem;
        "
        @click="quit"
        >退出</span
      >
      <span
        v-else
        style="
          color: #e22a1f;
          font-size: 0.16rem;
          font-weight: 500;
          cursor: pointer;
          margin-left: 0.15rem;
          font-family: PingFang SC;
          line-height: 0.12rem;
        "
        @click="login"
        >请登录</span
      >
    </div>
    <div class="LeftLoginStaticfalse" v-if="false">
      <!-- <div class="leftbox" @click="$router.push('/home')">
        <img
          class="leftbox"
          style="cursor: pointer"
          src="@/assets/image/header/logo.png"
          alt=""
        />
      </div> -->
      你好，
      <span
        style="
          color: #e22a1f;
          font-size: 0.16rem;
          font-weight: 500;
          cursor: pointer;
          font-family: PingFang SC;
          line-height: 0.12rem;
        "
        >请登录</span
      >
      <span
        style="
          color: #ec6c15;
          font-size: 0.16rem;
          font-weight: 500;
          cursor: pointer;
          margin-left: 0.1rem;
          font-family: PingFang SC;
          line-height: 0.12rem;
        "
        >请注册</span
      >
    </div>
    <div class="rightstatic">
      <div class="Telephone">
        咨询电话：0556-8858852
        <div class="weixinbox">
          <img src="../../static/Imgs/logo.png" alt="" />
          <span
          @click="dialogVisible=true"
            class="weixin"
            style="
              color: #ffffff;
              font-family: PingFang SC;
              font-size: 0.11rem;
              font-weight: 500;
              cursor: pointer;
              white-space: nowrap;
            "
            >微信交谈</span
          >
        </div>
      </div>
      <div class="Category">
        <div class="Categoryitem" @click="toUser('/IndividualCenter')">
          <img
            src="../../static/Imgs/people.png"
            alt=""
            style="margin-right: 0.03rem"
          />
          个人中心
        </div>
        <div class="Categoryitem" @click="toUser('/ShoppingCart')">
          <img
            src="../../static/Imgs/bugcar.png"
            alt=""
            style="margin-right: 0.03rem"
          />
          购物车
        </div>
        <div
          class="Categoryitem"
          @click="toUser('/MyOrder')"
          v-if="!userData.isStore"
        >
          <img
            src="../../static/Imgs/order.png"
            alt=""
            style="margin-right: 0.03rem"
          />
          我的订单
        </div>
        <div
          class="Categoryitem"
          @click="toUser('/CommodityCollection')"
          v-if="!userData.isStore"
        >
          <img
            src="../../static/Imgs/collect.png"
            alt=""
            style="margin-right: 0.03rem"
          />
          我的收藏
        </div>
        <div
          class="Categoryitemsmall"
          @click="
            $router.push({
              path: '/HelpCenter',
              query: {
                index: 0,
              },
            })
          "
        >
          联系我们
        </div>
        <div
          class="Categoryitemsmall"
          @click="
            $router.push({
              path: '/HelpCenter',
              query: {
                index: 1,
              },
            })
          "
        >
          帮助中心
        </div>
        <div class="Categoryitemsmall" @click="mess">手机APP</div>
      </div>
    </div>
    <el-dialog :visible.sync="dialogVisible" width="30%" class="newDialog">
      <div class="DiaLogHeader">
        <div class="titlebOX">微信交谈</div>
        <div class="chahao" @click="dialogVisible = false"></div>
      </div>
      <el-divider></el-divider>
      <div style="padding: 20px 40px" class="textBox">
        <div class="tishi">
          <i class="iconfont icon-weixin"></i>
          扫描下方二维码进行联系
        </div>
        <img src="@/assets/image/help/icon5.png" alt="" />
      </div>
      <div class="btnBox">
        <el-button type="primary" @click="dialogVisible = false" class="huiBtn">
          取消</el-button
        >
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { getUserData } from "@/api/user";
import { getToken, removeToken } from "@/utils/auth";
export default {
  data() {
    return {
      dialogVisible:false,
      userData: {
        username: "",
      },
      token: null,
    };
  },
  created() {
    this.token = getToken();
    this.getUserData();
  },
  activated() {
    this.token = getToken();
    this.getUserData();
    if (!this.token) {
      this.userData = {};
    }
  },
  methods: {
    mess(){
      this.$message({
          message: '暂未开放，敬请等待',
          type: 'warning'
        });
    },
    login() {
      this.$router.push("/login");
    },
    // 退出登陆
    quit() {
      removeToken();
      this.$router.push("/login");
    },
    // 前往个人中心
    toUser(url) {
      const token = getToken();
      if (token) {
        window.localStorage.setItem("type", this.userData.isStore);
        this.$router.push({
          path: url,
        });
      } else {
        this.$message({
          message: "请先登陆！",
          type: "warning",
        });
        this.$router.push("/login");
      }
    },
    // 获取个人信息
    getUserData() {
      getUserData().then((data) => {
        this.userData = data.data;
        sessionStorage.setItem('UserData',JSON.stringify(this.userData))
      });
    },
  },
};
</script>

<style scoped lang="scss">
.NavBox {
  width: 100%;
  height: 0.32rem;
  padding: 0.03rem 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  .leftbox {
    height: 0.3rem;
    font-size: 0.12rem;
    margin-right: 0.1rem;
  }
  .LeftLoginStatictrue {
    font-family: PingFang SC;
    font-size: 0.16rem;
    font-weight: 500;
    line-height: 0.12rem;
    color: #999999;
    display: flex;
    align-items: center;
  }
  .LeftLoginStaticfalse {
    font-family: PingFang SC;
    font-size: 0.12rem;
    font-weight: 500;
    line-height: 0.12rem;
    color: #999999;
  }
  .rightstatic {
    display: flex;

    .Telephone {
      display: flex;
      justify-content: center;
      align-items: center;
      font-family: PingFang SC;
      font-size: 0.16rem;
      font-weight: 500;
      color: #000000;
      .weixinbox {
        display: flex;
        justify-content: space-evenly;
        align-items: center;
        margin-left: 0.1rem;
        height: 0.2rem;
        border-radius: 0.02rem;
        font-size: 0.12rem;
        padding: 0.043rem 0.03rem 0.043rem 0.03rem;
        background-color: #57be33;
      }
    }
    .Category {
      margin-left: 0.15rem;
      display: flex;
      justify-content: center;
      align-items: center;
      color: #999999;
      .Categoryitem {
        display: flex;
        justify-content: center;
        align-items: center;
        cursor: pointer;
        padding: 0 0.1rem;
        width: 0.75rem;
        font-family: PingFang SC;
        font-size: 0.16rem;
        font-weight: 500;
        text-align: center;
        white-space: nowrap;
        border-left: 0.01rem solid #e8e8e8;
      }
      .Categoryitemsmall {
        cursor: pointer;
        padding: 0 0.15rem;
        width: 0.58rem;
        font-family: PingFang SC;
        font-size: 0.16rem;
        white-space: nowrap;
        font-weight: 500;
        text-align: center;
        border-left: 0.01rem solid #e8e8e8;
      }
    }
  }
}
</style>
<style scoped lang="scss">
.newDialog {
  /deep/ .el-divider {
    margin: 0px;
  }
  /deep/ .el-dialog__header {
    padding: 0;
  }
  .textBox {
    font-size: 0.2rem;
    // height: 10vh;
    display: flex;
    align-items: center;
    flex-direction: column;
    .tishi {
      display: flex;
      align-items: center;
      font-size: 0.16rem;
      .icon-weixin {
        color: rgb(67, 201, 62);
        margin-right: 0.1rem;
      }
    }
    .sgBpox {
      font-family: PingFang SC;
      font-size: 0.16rem;
      color: #999999;
      display: flex;
      align-items: center;
      flex-wrap: wrap;
      margin-top: 0.24rem;
      border-bottom: 0.01rem solid #e8e8e8;
      padding-bottom: 0.26rem;
      .newSg {
        padding: 0.12rem;
        border: 0.01rem solid #a7adb8;
        margin-right: 0.1rem;
        cursor: pointer;
        margin-bottom: 0.1rem;
      }
    }
    .ysBox {
      font-family: PingFang SC;
      margin-top: 0.15rem;
      font-size: 0.16rem;
      color: #999999;
      display: flex;
      align-items: center;
    }
    .isacitive {
      border: 0.01rem solid #ec6c15 !important;
      color: #ec6c15;
    }
    .newYs {
      font-size: 0.14rem;
      color: #000000;
      margin-left: 0.15rem;
      width: 1.5rem;
    }
    /deep/ .el-input-number .el-input__inner {
      height: auto !important;
    }
  }
  .btnBox {
    display: flex;
    justify-content: center;
    background: #fff;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
    position: absolute;
    bottom: 0;
    width: 100%;
    padding: 10px 0;
    .btnImg {
      width: 14px;
      height: 14px;
      vertical-align: middle;
    }
    /deep/ .el-button {
      padding: 10px 20px;
    }
  }
  .DiaLogHeader {
    display: flex;
    padding: 10px 20px;
    justify-content: space-between;
    .titlebOX {
      font-size: 16px;
      font-weight: 700;
      width: 100%;
      text-align: center;
    }
    .chahao {
      width: 20px;
      height: 20px;
      background-image: url("@/static/Imgs/userImg/chahao.png");
      background-size: 100% 100%;
      text-align: center;
      line-height: 20px;
      // color: #e65f00;
      cursor: pointer;
    }
  }
  .Markers {
    display: flex;
    align-items: center;
    .newQizi {
      width: 18px;
      height: 18px;
    }
    /deep/ .el-radio {
      display: flex;
      align-items: center;
      margin-left: 20px;
    }
  }
  /deep/ .huiBtn {
    background: #f5f7f9;
    border-color: #f5f7f9;
    color: #000;
  }
  /deep/ .hongBtn {
    background: #e22a1f;
    color: #fff;
    border-color: #e22a1f;
  }
}
/deep/ .el-dialog__body {
  padding: 0;
  padding-top: 10px;
  padding-bottom: 60px;
}
</style>
<style scoped lang="scss">
@media screen and (max-width: 1300px) {
  .Categoryitem {
    width: 0.85rem !important;
  }
  .Categoryitemsmall {
    width: 0.58rem !important;
  }
}
</style>
